@import "../dev.scss";
%height-full{
  height:100%;
}
#home{
  overflow: hidden;
  background-color: #ececec;
}
.searchbar{
  height: 100%;
  line-height: fr(78);
  text-align: center;
  color: #fff;
  font-size: fr(32);
}
#popoverB{
  position: fixed !important;
  bottom: 0px !important;
  top:auto !important;
  z-index: 10000;
  width: 100%;
  margin:0 !important;
  left:0 !important;
  border-radius: 0px;
  background-color: white;
  transition: all .5s;
  .price{
    p{
      margin-top: 3px;
      font-size: 14px;
      color:red;
    }
  }
}

.container{
  background-color: #ececec;
  overflow: hidden;
  .product-con{
     padding:0 !important;
  }
}

.option-list{
  background-color: white;
  height: fr(62);
  // margin-bottom: fr(10);
  overflow: auto;
  word-break: keep-all;
  white-space:nowrap;
  ul{
    padding:0 !important;
    float: left;
    padding-left: 1.25%;
    min-width: 100%;
    height: fr(62);
    li{
      height: 100%;
      padding:0 fr(24) 0 fr(24);
      text-align: center;
      display:inline-block;
      position: relative;
      vertical-align: top;
      p{
        color: #fe5512 !important;
        border-bottom: 2px solid #fe5512 !important;
      }
      &:after{
        content: '';
        height: 20px;
        width: 1px;
        background-color: #e3e3e3;
        position: absolute;
        z-index: 10;
        right:0;
        top: 50%;
        margin-top: -10px;
      }
      a{
        display: block;
        height: 100%;
        width: 100%;
      }
    }
  }
}

.wc-act{
  margin-top: fr(6);
  background-color: white;
  height: fr(205);
  overflow: hidden;
}
.act-adv{
  position: relative;
  float: left;
  height: fr(83);
  z-index: 13;
  width: 100%;
  overflow: hidden;
}
.month-active{
  height: fr(894);
  margin-top: fr(6);
  background-color: #61d7f9;
  background-image: url(../../assets/images/index/active-bg.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  padding: fr(218) fr(15) fr(50) fr(15);
  @at-root{
    .pro-ul{
      li{
        width: 49%;
        float: left;
        margin-bottom: fr(10);
        margin-right: fr(10);
        &:nth-child(2n){
          margin-right: 0;
        }
      }
    }
  }
}
.product-child{
  margin-top: fr(10);
  margin-bottom: 60px;
  padding: 0 fr(10);
  @include clearfix;
  @extend .pro-ul;
}
.server{
  ul{
    padding: 0 0.23438rem;
    overflow: hidden;
    li{
        float: left;
        width: 49%;
        height: fr(153);
        margin-bottom: fr(10);
        &:nth-child(2n){
          margin-left: 2%;
        }
    }
  }
  a{
    display: block;
    &:last-child{
      margin-bottom:0;
    }
  }
}
.user{
  padding-top:6px;
  overflow: hidden;
  padding-bottom: 6px;
  padding-left: 6px;
  .head{
    line-height: 36px;
    img{
      width: 28px;
      vertical-align: center;
      border-radius: 50%;
    }
  }
  .info{
    margin-left: 0px;
    h3{
      line-height:18px;
      font-size: 14px;
    }
    .a-name{
      color: #fd5588;
    }

  }
}
.options{
  padding:0!important;

  ul{
    li{
      border-top:1px solid #d2d2d2;
      padding:1px 6px;
      color:#979595;
    }
  }
}
.product-con{
  // background-color: white;
  padding:0 6px;
  width:getPercent(750,750);
  margin-bottom: 70px;
  padding-bottom: 10px;
  min-height: 300px;
}
.adv-con{
  min-height:96px;
  img{
    min-height:96px;
    max-width: 100%;
  }
}
.collapse{
  padding:0 !important;
  @extend %clear-border;
  margin: 0 !important;
  max-height: 300px;
  overflow-y:scroll !important;
}
.mui-table-view{
  @extend %clear-border;
}
.clap-ctrl{
  margin:0 !important;
  /*margin-top: 10px !important;*/
  padding: 0 !important;
  text-align: center;
  background-color: white;
  border-top:1px solid #d2d2d2;
  img{
    width: 14px;
  }
}
.opt-active{
   background-color: #eee;
   color: #dd513f !important;
 }
 .change{
   -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
       -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
           transform: rotate(180deg);
 }
 .product{
  background-color:#fff;
  padding-top: .1px;
 }
 .hot{
  background-color: #fff;
  height:44px;
  padding:5px 0;
  margin-bottom: 8px;
  p{
    height: 100%;
    line-height: 34px;
    .hot-rem{
      color:#f45b56;
      display: inline-block;
      padding: 0 10px;
      border-right: 1px solid #eee;
    }
    .tip{
      color:#f8aa36;
      font-size: 12px;
      margin-left: 5px;
      padding:0 3px;
      border:1px solid #f8aa36;
      border-radius: 5px;
    }
  }
  .slider-new{
    height: 100%;
    margin-left: 5px;
    width: getPercent(5,10);
    ul{
      height: 100%;
      width: 100%;
      overflow: hidden;
      li{
        height: 100%;
        width: 100%;
        line-height: 34px;
        a{
          display: block;
          height: 100%;
          width: 100%;
          color: #b0b0b0;
        }
      }
    }
  }
 }
 .package{
    margin-bottom: 8px;
    background-color: white;
    height: 140px;
     ul{
      height: 100%;
      -webkit-transition: all .5;
         -moz-transition: all .5;
          -ms-transition: all .5;
           -o-transition: all .5;
              transition: all .5;
      li{
        height: 100%;
        float: left;
        width: getPercent(1,3);
        overflow: hidden;
        a{
          display: block;
          width: 100%;
          height: 100%;
        }
        @at-root{
          .p-item{
            text-align: center;
            padding:5px;
            h3{
              color:#f8aa36;
              line-height:16px;
              font-size:16px;
              font-weight: 500;
              margin-top: 10px;
              overflow: hidden;
              word-break: keep-all;
              /*text-overflow:*/
            }
            p{
              font-size: 12px;
              color:#b2b2b2;
              margin-bottom: 4px;
            }
            .p-cover{
              position: relative;
              width: 100%;
              height: 100px;
              overflow: hidden;
              img{
                width: 100%;
                position: absolute;
                bottom:20px;
                left: 0;
              }
              .cover-detail{
                position: absolute;
                right: 0px;
                top:22px;
                height: 18px;
                width: 18px;
                line-height: 18px;
                text-align: center;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
     }
 }
 .set-border{
  border-right: 1px solid #eee;
  border-left: 1px solid #eee;
 }
 .rem-sort{
  height: 140px;
  background-color:white;
  margin-bottom: 8px;
    ul{
      height: 100%;
      li{
        width: getPercent(1,2);
        height: 50%;
        float: left;
        a{
          display: block;
          height: 100%;
          width: 100%;
          .sort-item{
            overflow: hidden;
            @at-root{
              .sort-detail{
                width: getPercent(232,378);
                padding:15px 1px 15px 10px;
                h4{
                  color: #b2b2b2;
                  font-size: 14px;
                  font-weight: 500;
                }
                p{
                  color: #f45b56;
                }
              }
              .sort-cover{
                width: getPercent(146,378);
                padding:5px 2px;
                img{
                  width: 100%;
                }
              }
            }
          }
        }
      }
      li:nth-child(2n-1) a{
        border-right:1px solid #eee;
      }
      li:nth-child(1) a{
        border-bottom:1px solid #eee;
      }
      li:nth-child(2) a{
        border-bottom:1px solid #eee;
      }
    }
 }
 .menu-item{
    width: getPercent(4,12);
    position: fixed;
    left: 0;
    top:56px;
    z-index: 1000;
    ul{
      padding:0 6px;
      background-color: #eee;
      opacity: .9;
      li{
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #fff;
        a{
          img{
            width: 12px;
            vertical-align: middle;
            margin:0 5px;

          }
          color:#595959;
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }
 }
 .mui-table-view{
   &:before{
    background-color:white;
   }
   &:after{
    background-color: white;
   }
 }
 button{
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
 }
 .mui-active{
  background-color: white;
 }
 .slider-container{
  min-height: 1.36rem;
 }
 .new-act{
  margin: fr(12) 0;
 }

